<script setup>
  import useHome from "@/stores/modules/home";
  import {storeToRefs} from "pinia";

  const homeStore = useHome()

  const {categories} = storeToRefs(homeStore)
</script>

<template>
  <div class="homeCategories">
    <!--需要再外层再嵌套一个flex盒子，不然横向无法滚动-->
    <div class="box">
      <template v-for="item in categories" :key="item.id">
        <div class="item">
          <img :src="item.pictureUrl" :alt="item.title">
          <div class="text">
            {{ item.title }}
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<style lang="less" scoped>
  .homeCategories {
    display: flex;

    .box {
      display: flex;
      padding: 10px;
      overflow-x: auto;
      //关闭伪元素滚动条
      &::-webkit-scrollbar {
        display: none;
      }

      .item {
        text-align: center;
        width: 50px;
        margin: 10px;
        flex-shrink: 0;

        img {
          width: 32px;
          height: 32px;
        }

        .text {
          margin-top: 5px;
          font-size: 12px;
        }
      }
    }

  }
</style>